<script>
export default {
  components: {},
  data() {
    return {
      contentLoading: false,
      bodyData: [],
      sensorId: ''
    };
  },
  async created() {},
  mounted() {},
  methods: {
    openEvent(row) {
      const { isOpen, id } = row;
      this.contentLoading = true;
      if (isOpen) {
        this.$kt.request.send({
          uri: "/business-iot-web/admin/iotDeviceAlarm/close",
          data: { id },
          stateSuccess: (res) => {
            this.openNew(this.sensorId)
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.contentLoading = false;
          },
        });
      } else {
        this.$kt.request.send({
          uri: "/business-iot-web/admin/iotDeviceAlarm/open",
          data: { id },
          stateSuccess: (res) => {
            this.openNew(this.sensorId)
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.contentLoading = false;
          },
        });
      }
    },
    openNew(sensorId) {
      this.sensorId = sensorId
      this.contentLoading = true
      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotDeviceAlarm/getAllNew",
        data: { sensorId },
        stateSuccess: (res) => {
          this.contentLoading = false
          this.bodyData = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.contentLoading = false;
        },
      });
    },
  },
};
</script>

<template>
  <div>
    <el-scrollbar v-loading="contentLoading" class="scrollbar-box">
      <!-- 更改头部颜色 -->
      <el-table
        :data="bodyData"
        style="width: 100%"
        border
        height="calc(100vh - 120px)"
      >
        <el-table-column :label="$i18n.zhToGlobal('Serial no')" prop="id">
        </el-table-column>
        <el-table-column prop="description" :label="$i18n.zhToGlobal('Name')">
        </el-table-column>

        <el-table-column
          prop="sensorId"
          :label="$i18n.zhToGlobal('Linked sensors')"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="type"
          :label="$i18n.zhToGlobal('Trigged condition')"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :label="$i18n.zhToGlobal('Data parameter')"
          width="180"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.x">x = {{ scope.row.x }} </el-tag>
            <el-tag v-if="scope.row.y">y = {{ scope.row.y }} </el-tag>
            <el-tag v-if="scope.row.m">m = {{ scope.row.m }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="isEnable"
          :label="$i18n.zhToGlobal('Status')"
          width="180"
        >
          <template #default="scope">
            <div style="text-align: center">
              <div v-if="scope.row.isEnable">Normal</div>
              <div v-else>Pause</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$i18n.zhToGlobal('Action')"
          width="180"
        >
          <template #header>
            <div style="text-align: center">
              {{ $i18n.zhToGlobal("Action") }}
            </div>
          </template>
          <template #default="scope">
            <div style="text-align: center">
              <div>
                <kt-icon
                  v-if="scope.row.isOpen"
                  @click="openEvent(scope.row)"
                  icon="el-icon-video-pause"
                  color="#000"
                  class="icon-edit icon-btn"
                ></kt-icon>
                <kt-icon
                  v-else
                  @click="openEvent(scope.row)"
                  icon="el-icon-video-play"
                  color="#000"
                  class="icon-edit icon-btn"
                ></kt-icon>
                <kt-icon
                  @click="toRemove(scope.row)"
                  icon="el-icon-delete"
                  color="#ff0000"
                  style="margin-left: 20px"
                  class="icon-delete icon-btn"
                ></kt-icon>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.icon-btn{
  cursor: pointer;
}
</style>